<template>
  <div class="app-container">
    <div id="app-menu">
      <!-- 预览窗 -->
      <div class="weixin-preview">
        <div class="weixin-bd">
          <div class="weixin-header">公众号菜单</div>
          <ul class="weixin-menu" id="weixin-menu">
            <li v-for="(btn,i) in menu.buttons" :key="i" class="menu-item" :class="{'current':selectedMenuIndex===i&&selectedMenuLevel==1}" @click="selectMenu(i)">
              <div class="menu-item-title">
                <span>{{ btn.name }}</span>
              </div>
              <ul class="weixin-sub-menu">
                <li v-for="(sub,i2) in btn.subButtons" :key="i2" class="menu-sub-item" :class="{'current':selectedMenuIndex===i&&selectedSubMenuIndex===i2&&selectedMenuLevel==2,'on-drag-over':onDragOverMenu==(i+'_'+i2)}" @click.stop="selectSubMenu(i,i2)"  draggable="true"  @dragstart="selectSubMenu(i,i2)" @dragover.prevent="onDragOverMenu=(i+'_'+i2)" @drop="onDrop(i,i2)">
                  <div class="menu-item-title">
                    <span>{{sub.name}}</span>
                  </div>
                </li>
                <li v-if="btn.subButtons.length<5" class="menu-sub-item" :class="{'on-drag-over':onDragOverMenu==(i+'_'+btn.subButtons.length)}" @click.stop="addMenu(2,i)" @dragover.prevent="onDragOverMenu=(i+'_'+btn.subButtons.length)" @drop="onDrop(i,btn.subButtons.length)">
                  <div class="menu-item-title">
                    <i class="el-icon-plus"></i>
                  </div>
                </li>
                <i class="menu-arrow arrow_out"></i>
                <i class="menu-arrow arrow_in"></i>
              </ul>
            </li>
            <li class="menu-item" v-if="menu.buttons.length<3" @click="addMenu(1)"> <i class="el-icon-plus"></i></li>
          </ul>
        </div>
      </div>
      <!-- 菜单编辑器 -->
      <div class="weixin-menu-detail" v-if="selectedMenuLevel>0">
        <menu-button-editor :button="selectedButton" :selectedMenuLevel="selectedMenuLevel" @delMenu="delMenu"></menu-button-editor>
      </div>
    </div>
    <div class="weixin-btn-group" v-hasPermi="['wx:menu:save']"  @click="updateWxMenu">
      <el-button type="success" icon="el-icon-upload">发布</el-button>
      <el-button type="warning" icon="el-icon-delete" @click="delMenu">清空</el-button>
    </div>
  </div>
</template>
<script>
  import { getMenu, updateMenu } from "@/api/wx/menu";
  export default {
    components: {
      menuButtonEditor: () => import('./menu-button-editor')
    },
    data() {
      return {
        menu: { 'buttons': [] },//当前菜单
        selectedMenuIndex: '',//当前选中菜单索引
        selectedSubMenuIndex: '',//当前选中子菜单索引
        selectedMenuLevel: 0,//选中菜单级别
        selectedButton: '',//选中的菜单按钮
        onDragOverMenu:'' //当前鼠标拖动到的位置
      }
    },
    mounted() {
      this.getWxMenu();
    },
    methods: {
      getWxMenu() {
        getMenu().then(response => {
          this.menu = response.data.menu;
        });
      },
      //选中主菜单
      selectMenu(i) {
        this.selectedMenuLevel = 1
        this.selectedSubMenuIndex = ''
        this.selectedMenuIndex = i
        this.selectedButton = this.menu.buttons[i]
      },
      //选中子菜单
      selectSubMenu(i,i2) {
        this.selectedMenuLevel = 2
        this.selectedMenuIndex = i
        this.selectedSubMenuIndex = i2
        this.selectedButton = this.menu.buttons[i].subButtons[i2]
      },
      //添加菜单
      addMenu(level,i) {
        if (level == 1 && this.menu.buttons.length < 3) {
          this.menu.buttons.push({
            "type": "view",
            "name": "菜单名称",
            "subButtons": [],
            "url": ""
          })
          this.selectMenu(this.menu.buttons.length - 1)
        }
        if (level == 2 && this.menu.buttons[i].subButtons.length < 5) {
          this.menu.buttons[i].subButtons.push({
            "type": "view",
            "name": "子菜单名称",
            "url": ""
          })
          this.selectSubMenu(i,this.menu.buttons[i].subButtons.length - 1)
        }
      },
      //删除菜单
      delMenu() {
        if (this.selectedMenuLevel == 1 && confirm('删除后菜单下设置的内容将被删除')) {
          this.menu.buttons.splice(this.selectedMenuIndex, 1);
          this.unSelectMenu()
        } else if (this.selectedMenuLevel == 2) {
          this.menu.buttons[this.selectedMenuIndex].subButtons.splice(this.selectedSubMenuIndex, 1);
          this.unSelectMenu()
        }
      },
      unSelectMenu(){//不选中任何菜单
        this.selectedMenuLevel = 0
        this.selectedMenuIndex = ''
        this.selectedSubMenuIndex = ''
        this.selectedButton = ''
      },
      updateWxMenu() {
        updateMenu(this.menu).then(response => {
          this.$message.success('操作成功')
        });
      },
      onDrop(i,i2){//拖拽移动位置
        this.onDragOverMenu='';
        if(i==this.selectedMenuIndex && i2==this.selectedSubMenuIndex) //拖拽到了原位置
          return
        if(i!=this.selectedMenuIndex && this.menu.buttons[i].subButtons.length>=5){
          this.$message.error('目标组已满');
          return
        }
        this.menu.buttons[i].subButtons.splice(i2,0,this.selectedButton)
        let delSubIndex = this.selectedSubMenuIndex
        if(i==this.selectedMenuIndex && i2<this.selectedSubMenuIndex)
          delSubIndex++
        this.menu.buttons[this.selectedMenuIndex].subButtons.splice(delSubIndex, 1);
        this.unSelectMenu()
      }
    }
  }
</script>
<style src="@/assets/css/wx-menu.css"></style>
